<template>
  <div class="home">
    <el-container style="height: 500px; border: 1px solid #eee">
      <el-aside :width="$store.state.isCollapse ? 'auto' : '200px'" style="background-color: rgb(84, 92, 100)">
        <CommonAside></CommonAside>
      </el-aside>
      <el-container>
        <el-header style="font-size: 12px">
          <div>
            <i v-if="$store.state.isCollapse" @click="opens" class="el-icon-s-unfold"></i>
            <i v-else class="el-icon-s-fold" @click="opens"></i>

          </div>
          <div>
            <el-dropdown>
              <i class="el-icon-setting" style="margin-right: 15px"></i>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item @click.native="outLogin">退出登录</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
            <span>{{ $store.state.name }}</span>
          </div>
        </el-header>
        <el-main>
          <!-- 组件的缓存 默认缓存所有组件
              include='index' 缓存指定组件（用name起个名字）
              exclude='index' 排除指定组件
          -->
          <keep-alive exclude="index">
            <!-- 给子路由一个出口-->
            <router-view></router-view>
          </keep-alive>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>



<script>
import CommonAside from '@/components/CommonAside.vue';


export default {
  data() {
    return {

    }
  },
  components: {
    CommonAside
  },
  methods: {
    outLogin() {
      this.$confirm('此操作将退出登录, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$store.dispatch('outLogin')
        this.$message({
          type: 'success',
          message: '退出成功!'
        });
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消退出'
        });
      });
    },
    opens() {
      this.$store.dispatch('Collapse')
      console.log(this.$store.state.isCollapse);

    }
  }

};
</script>

<style scoped lang="scss">
.el-header {
  background-color: #B3C0D1;
  color: #333;
  line-height: 60px;
  display: flex;
  justify-content: space-between;
}

.el-menu {
  border: none !important;
}

.el-aside {
  color: #333;
}

/* ::v-deep 样式穿透  组件嵌套太多 样式改不动  */
::v-deep .el-container {
  height: 100vh !important;
  border: none !important;
}
</style>
